<script>
    // 账户模态表单页
    Vue.component('record-material-form', {
        template: `
      <el-dialog :visible.sync="dialogShow" width="800px" @close="closeModal">
        <h3 slot="title">
            <span>添加材料</span>
        </h3>


    <el-form ref="form"  :model="recordmaterialForm" label-width="80px">
        <el-form-item label="">
     <el-table
      :data="productListData"
      style="width: 100%">
     <el-table-column
        prop="product_info"
        label="材料" >
          <template slot-scope="scope">
            <div>
            <el-select
                size="mini"
                placeholder="全部材料"
                        :value="productListData[scope.$index]['title']"
                        filterable
                        default-first-option
                        @change="changeMaterial($event,scope.row,scope.$index)"
            >
            <el-option
            v-for="item in materials"
            :key="item.id"
            :label="item.title"
            :value="item.id">
            </el-option>
            </el-select>
            </div>
          </template>
      </el-table-column>
    <el-table-column
        prop="spec"
        label="单位">
        <template slot-scope="scope">
            <span>{{scope.row['spec']}}</span>
          </template>
      </el-table-column>

      <el-table-column
        prop="cost_price"
        label="单价">
        <template slot-scope="scope">
            <span>{{scope.row['cost_price']}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="num"
        label="数量">
        <template slot-scope="scope">
          <el-input v-model="productListData[scope.$index]['num']" size="mini" v-if="productListData[scope.$index]['material_id']" type="number" min="0" step="1"  @blur="validNum($event,scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="money"
        label="金额">
        <template slot-scope="scope">
            <el-input v-model="productListData[scope.$index]['money']" size="mini" v-if="productListData[scope.$index]['material_id']" type="number" min="0" step="0.01" @blur="validPrice($event,scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="opt"
        label="">
        <template slot-scope="scope">
          <el-button type="info" icon="el-icon-delete" circle  @click="delProductRow(scope.$index)" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <p class="opt-row">
        <i class="el-icon-plus"></i>
        <el-button type="text" @click="addProductRow">添加一行</el-button>
    </p>
    <p class="t-r">
    金额合计：{{productTotalMoney}}
    </p>
    </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="confirmData()">确 定</el-button>
    </div>
    </el-dialog>
    `,
        props: ['dialog-show','form-row'],
        computed: {
            currentTallyId() {
                return this.$store.state.currentTallyId
            },
            currentTally () {
                return this.$store.state.currentTally
            },
            materials(){
                return this.$store.state.materialList;
            }

        },
        watch: {
            dialogShow:{
                handler (newVal) {},
                deep:true,
                immediate: true
            }
        },
        data:function(){
            return {
                recordmaterialForm:{},
                productListData:[
                    {}
                ],
                productTotalMoney:0,
            }
        },
        methods: {
            confirmData(){
                if(this.productTotalMoney != 0){
                    this.$emit('confirmData',{
                        'list':this.productListData,
                        'money':this.productTotalMoney
                    })
                }else{
                    this.$emit('confirmData')
                }
                this.$emit('modalClose')
            },
            clear_material(){
                this.productListData = [{}]

                this.productTotalMoney = 0
            },
            calTotal() {
                let totalMoney = 0
                this.productListData.forEach((item) => {
                    if(item['material_id']) {
                        totalMoney = totalMoney + parseFloat(item['money'])
                    }
                })
                this.productTotalMoney = parseFloat(totalMoney).toFixed(2)
            },
            changeMaterial(productId, row, index) {
                let that = this
                let item = this.materials.find((iv)=>{
                    return iv.id === productId;
                });

                this.$set(this.productListData,index,{
                    'title':item['title'],
                    'material_id':item['id'],
                    'spec':item['spec'],
                    'cost_price':item['price'],
                    'num':1
                })
                this.calRowMoney(index)

            },
            calRowMoney(index){
                let money = this.productListData[index]['money']
                let num = this.productListData[index]['num']
                let cost_price = (money / num ).toFixed(2);
                if(!isNaN(cost_price)){
                    this.productListData[index]['cost_price'] = cost_price
                }
                this.calTotal()
            },
            validNum(e,index) {
                let number = this.productListData[index]['num']
                number = parseFloat(number).toFixed(2)
                this.productListData[index]['num'] = number
                this.calRowMoney(index)
            },
            validPrice(e,index){
                let number = this.productListData[index]['money']
                money = parseFloat(number).toFixed(2)
                this.productListData[index]['money'] = money
                this.calRowMoney(index)
            },
            addProductRow() {
                this.productListData.push({})
            },
            delProductRow(index)  {
                this.productListData.splice(index,1)
                this.calTotal()
            },
            closeModal(){
                this.$emit('modalClose')
            },
            calcMax(num) {
                if(!num) return '';
                if(isNaN(num)) {
                    return '';
                }else {
                    return parseFloat(num)
                }
            },
        }
    })
</script>
<style>

    .t-r {
        text-align: right;
    }
    .opt-row{
        color: #409EFF;
    }
</style>
